<template>
    <div>
        <wd-header title="验证码登录">
            <router-link to="/login" slot="left">
                <span class="header-title">密码登录</span>
            </router-link>
        </wd-header>
        <div class="form">
            <p>
                <i class="iconfont">&#xe64d;</i>
                <input type="tel" placeholder="请输入手机号" v-model="tel" ref="tel">
            </p>
            <p>
                <i class="iconfont">&#xe610;</i>
                <input type="password" placeholder="请输入短信码" v-model="verifyCode" ref="verifyCode" maxlength="6">
                <button @click="getCode">获取验证码</button>
            </p>
            <p>登录表示同意<span @click="protocol">《用户协议》</span></p>
        </div>
        <div class="denglu">
            <button @click="login" :class="[tel ? 'not_empty' : '']">登录</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'codelogin',
    data() {
        return {
            tel: null,
            verifyCode: null,
            telReg: /(^1[3|4|5|7|8][0-9]{9}$)/,
            codeurl: 'http://www.jydsapp.com/jydsApi/api/h5/sms/sendCode',
            loginurl: 'http://www.jydsapp.com/jydsApi/api/h5/login/phoneVerifyLogin'
        }
    },
    methods: {
        protocol(){
            this.$router.push('/protocol')
        },
        getCode(ev) {
            ev = ev || window.event
            let that = this
            if (that.telReg.test(that.tel) == false) {
                that.$Toast({
                    content:'请输入正确的手机号码'
                })
                that.$refs.tel.focus()
            } else {
                ev.srcElement.setAttribute("disabled", true)
                var second = 60
                var timer = setInterval(() => {
                    second--
                    if (second < 1) {
                        clearInterval(timer);
                        ev.srcElement.innerHTML = '获取验证码'
                        ev.srcElement.removeAttribute("disabled")
                        second = 60
                        return false
                    } else {
                        ev.srcElement.innerHTML = second + ' 秒后重试'
                    }
                }, 1000)
                let str = `{"phoneNum":"${that.tel}","stype":2}`
                that.fetch({
                    method: 'post',
                    url: that.codeurl,
                    params: {
                        "paramStr": str
                    }
                }).then((response) => {
                    that.$Toast({
                        content:response.data.message,
                        autoClose:true
                    })
                }).catch((error) => {
                    that.$Toast({
                        content:error.data.message,
                        autoClose:true
                    })
                });
            }
        },
        login() {
            let that = this
            if (that.telReg.test(that.tel) == false) {
                that.$Toast({
                    content:'请输入正确的手机号码'
                })
                that.$refs.tel.focus()
            } else {
                if (!that.verifyCode) {
                    that.$Toast({
                        content:'请输入短信码'
                    })
                    that.$refs.verifyCode.focus()
                } else {
                    let str = `{"phoneNum":"${that.tel}","verifyCode":"${that.verifyCode}"}`
                    that.fetch({
                        method: 'post',
                        url: that.loginurl,
                        params: {
                            "paramStr": str
                        }
                    }).then((response) => {
                        if (response.data.code == 200) {
                            that.$Toast({
                                content:'登录成功！'
                            })
                            let res = JSON.parse(response.data.data)
                            let user = res
                            localStorage.user = JSON.stringify(user)
                            localStorage.freeCount = user.user.freeCount
                            setTimeout(()=>{
                                that.$router.replace('/')
                            },900)
                        } else {
                            that.$Toast({
                                content:response.data.message
                            })
                        }
                    }).catch((error) => {
                        that.$Toast({
                            content:error.data.message
                        })
                    });
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.form {
    display: flex;
    flex-direction: column;
    padding: 0 0.740741rem;
    margin-top: 0.833333rem;
    p {
        border-bottom: 1px solid #999;
        display: flex;
        margin-bottom: 0.37037rem;
        padding: 0.185185rem 0;

        .iconfont {
            color: #000
        }
        
        input {
            flex: 1;
            padding-bottom: 0.185185rem;
            text-align: center;
            background: none;
            transform: translateX(-0.259259rem)
        }
        button {
            background: #fe4f4a;
            color: #fff;
            border-radius: 5px;
            padding: 4px;
        }
        &:nth-child(2) {
            display: flex;
            justify-content: space-between;
            position: relative;
            input {
                position: absolute;
                bottom: 0.185185rem;
                left: 50%;
                transform: translateX(-50%)!important;
            }
        }
        &:nth-child(3) {
            border-bottom: 0;
            margin: 0;
            color: #555;

            span{
                color: #fe4f4a;
            }
        }
    }
    ul {
        display: flex;
        justify-content: space-between;
    }
}

.denglu {
    padding: 0 0.740741rem;
    margin-top: 0.462963rem;
    display: flex;
    button {
        color: #aaa;
        flex: 1;
        height: 1.1rem;
        line-height: 1.1rem;
        background: none;
        border: 1px solid #aaa;
        border-radius: 0.148148rem;
    }

    button.not_empty{
        border: 1px solid #fe4f4a;
        color: #fe4f4a;
        transition: all .5s;
    }
}
</style>
